<template>
    <transition name="slide-right">
        <v-touch style="height: 100%" v-on:swiperight="">
            <div class="content-gray">
                <div style="background-color: #FBFCFD;overflow: hidden;">
                    <div class="transfer-title">
                        <span class="title-left mui-icon mui-icon-back" @click="changeRoute('/wallet/transaction/etsc/list')"></span>
                        <span>{{ $t('m.wallet.transaction.transfer.listTitle') }}</span>
                        <span class="title-right"><img src="@/assets/img/saomiao.png" alt="" @click="changeRoute('/scan')"></span>
                    </div>
                </div>
                <div class="transfer-money">
                    <div class="money-title">
                        <div>{{ $t('m.wallet.transaction.transfer.prompt[17]') }}</div>
                        <div style="text-align: right;">
                            {{ $t('m.wallet.transaction.transfer.prompt[0]') }}
                            {{ balance.ETSC - eth | roundOff(2)}} ETSC
                        </div>
                    </div>
                    <input type="text" @keyup="doExchange(2)" v-model="eth"
                           :placeholder="$t('m.wallet.transaction.transfer.prompt[1]')">
                </div>
                <div class="transfer-money">
                    <div class="money-title">
                        <div>{{ $t('m.wallet.transaction.transfer.prompt[18]') }}</div>
                        <div style="text-align: right;">
                            {{ $t('m.wallet.transaction.transfer.prompt[0]') }}
                            <template v-if="exchange.type=='CNY'">
                                ￥ {{ balance.ETSC * currency.ETSC - money | roundOff(2)}}
                            </template>
                            <template v-else>
                                $ {{ balance.ETSC * currency.ETSC / exchange.rate - money | roundOff(2)}}
                            </template>
                        </div>
                    </div>
                    <input type="text" @keyup="doExchange(1)" v-model="money"
                           :placeholder="$t('m.wallet.transaction.transfer.prompt[18]')">
                </div>
                <div class="transfer-address">
                    <div class="address-title">{{ $t('m.wallet.transaction.transfer.prompt[2]') }}
                        <img src="@/assets/img/gather-address.png" alt="" @click="changeRoute('/my/contact/list',{url:'/wallet/transaction/etsc/transfer',eth:eth,money:money})"></div>
                    <input type="text" :placeholder="$t('m.wallet.transaction.transfer.prompt[3]')" class="address-input" v-model="address">
                    <div class="address-remark">{{ $t('m.wallet.transaction.transfer.prompt[4]') }}<span> {{ $t('m.wallet.transaction.transfer.prompt[5]') }}</span> <input type="text"></div>
                </div>
                <div class="transfer-cost">
                    <span>{{ $t('m.wallet.transaction.transfer.prompt[6]') }}</span>
                    <span>
                        {{ gasPrice }} gwei
                    </span>
                </div>
                <div class="transfer-range">
                    <mt-range v-model="gasPrice" :min="1" :step="0.1" :max="50">
                        <div slot="start" class="range-start"><img src="@/assets/img/tortoise.png" alt=""></div>
                        <div slot="end" class="range-end"><img src="@/assets/img/rabbit.png" alt=""></div>
                    </mt-range>
                </div>
                <div class="transfer-remind">
                    <p>{{ $t('m.wallet.transaction.transfer.prompt[19]') }}</p>
                    <p>{{ $t('m.wallet.transaction.transfer.prompt[20]') }}</p>
                </div>
                <div class="content-next" v-show="button_1" @click="step=2">{{ $t('m.wallet.transaction.transfer.prompt[7]') }}</div>
                <div class="content-next2" v-show="!button_1">{{ $t('m.wallet.transaction.transfer.prompt[7]') }}</div>
            </div>
            <transition name="step-two">
                <div v-show="step==2">
                    <div class="bg"></div>
                    <div class="pay-detail">
                        <div class="detail-title">
                            <img src="@/assets/img/cha.png" alt="" @click="step=1">{{ $t('m.wallet.transaction.transfer.prompt[8]') }}
                        </div>
                        <div class="detail-money">{{ eth }} ETSC</div>
                        <div class="detail-information">
                            <div>{{ $t('m.wallet.transaction.transfer.prompt[9]') }}</div>
                            <div>{{ $t('m.wallet.transaction.transfer.listTitle') }}</div>
                        </div>
                        <div class="detail-gather">
                            <div>{{ $t('m.wallet.transaction.transfer.prompt[2]') }}</div>
                            <div>{{ address }}</div>
                        </div>
                        <div class="detail-pay">
                            <div>{{ $t('m.wallet.transaction.transfer.prompt[10]') }}</div>
                            <div>{{ walletActive.address }}</div>
                        </div>
                        <div class="detail-cost">
                            <div>gasPrice</div>
                            <div>
                                <div>{{ gasPrice }} Gwei</div>
                                <!--<div class="cost-money">=Gas(60,000)*Gas Proce({{ gasPrice }} gwei)</div>-->
                                <!--<img src="@/assets/img/rightblue.png" alt="">-->
                            </div>
                        </div>
                        <div class="content-next" @click="step=3">{{ $t('m.wallet.transaction.transfer.prompt[7]') }}</div>
                    </div>
                </div>
            </transition>
            <transition name="step-three">
                <div v-show="step==3">
                    <div class="bg"></div>
                    <div class="content-password">
                        <div class="password-title">
                            <img src="@/assets/img/left.png" alt="" @click="step=2">{{ $t('m.wallet.transaction.transfer.prompt[11]') }}
                        </div>
                        <div class="password-wallet">{{ $t('m.wallet.transaction.transfer.prompt[12]') }}</div>
                        <div class="password-word">
                            <input :type="pwdShow?'text':'password'" :placeholder="$t('m.wallet.transaction.transfer.prompt[13]')" v-model="pwd">
                        </div>
                        <img src="@/assets/img/closeeyes.png" alt="" class="password-img" v-show="!pwdShow" @click="pwdShow=true">
                        <img src="@/assets/img/createwallet/eye-open.png" alt="" class="password-img" v-show="pwdShow" @click="pwdShow=false">

                        <!--<div class="password-forget">忘记密码？</div>-->
                        <div class="password-sure vue-button-active" @click="doTransfer()" v-show="button_2">{{ $t('m.wallet.transaction.transfer.prompt[14]') }}</div>
                        <div class="password-sure" v-show="!button_2">{{ $t('m.wallet.transaction.transfer.prompt[14]') }}</div>
                    </div>
                </div>
            </transition>

            <Success></Success>
            <Loading></Loading>
        </v-touch>
    </transition>
</template>
<script>
    /* eslint-disable */
    import {AESDecrypt} from '@/assets/js/utils/crypto'
    import {myAlert} from "@/assets/js/h5plus/nativeUI";
    import {transferETSC} from "@/assets/js/etherjs/transaction";
    import {getETSCGasPrice} from "@/assets/js/etherjs/account";
    import {synBalanceOnce} from '@/assets/js/timer/index';
    import {isAddress} from '@/assets/js/etherjs/until';

    export default {
        name: 'wallet_transaction_etsc_transfer',
        create() {
        },
        mounted() {
            this.address = this.$route.query.address ? this.$route.query.address : "";
            this.eth = this.$route.query.eth ? this.$route.query.eth : "";
            this.money = this.$route.query.money ? this.$route.query.money : "";
            this.getGasPrice();
            setInterval(() => {
                this.checkEmpty();
            }, 500);
            synBalanceOnce();
            this.$store.dispatch("aBackUrl", "/wallet/transaction/etsc/list");
        },
        watch: {},
        data() {
            return {
                gasPrice: 1,
                address: "",
                eth: "",
                money: "",
                msg: "",
                step: 1,
                button_1: false,
                button_2: false,
                pwd: "",
                pwdShow: false,
            }
        },
        methods: {
            checkEmpty: function () {
                this.button_1 = this.eth != '' && this.address != this.walletActive.address && parseFloat(this.eth) < parseFloat(this.balance.ETSC);
                this.button_2 = this.pwd != '';
            },
            doExchange: function (type) {
                let moneyEx;
                if (type == 1) {
                    if (this.exchange.type == 'USD') {
                        moneyEx = this.money * this.exchange.rate;
                    } else {
                        moneyEx = this.money;
                    }
                    this.eth = moneyEx / this.currency.ETSC;
                } else {
                    moneyEx = this.eth * this.currency.ETSC;
                    if (this.exchange.type == 'USD') {
                        this.money = moneyEx / this.exchange.rate;
                    } else {
                        this.money = moneyEx;
                    }
                }
            },
            getGasPrice: async function () {
                let price = await getETSCGasPrice();
                this.gasPrice = price.toString() / 10 ** 9;
            },
            doTransfer: function () {
                if (!isAddress(this.address)) {
                    myAlert({
                        msg: "invalid address",
                        button: this.$t('m.wallet.transaction.transfer.prompt[14]')
                    });
                    return;
                }

                if (this.address == '') {
                    myAlert({
                        msg: this.$t('m.wallet.transaction.transfer.prompt[15]'),
                        button: this.$t('m.wallet.transaction.transfer.prompt[14]')
                    });
                    return;
                }
                let pKey = AESDecrypt({
                    pwd: this.pwd,
                    msg: this.walletActive.pKey
                });
                if (pKey == '') {
                    myAlert({
                        msg: this.$t('m.wallet.transaction.transfer.prompt[16]'),
                        button: this.$t('m.wallet.transaction.transfer.prompt[14]')
                    });
                    return
                }
                this.step = 1;
                this.aLoading({
                    show: true,
                    tip: this.$t('m.component.alert_shot.prompt1[12]')
                });
                transferETSC({
                    privateKey: pKey,
                    to: this.address,
                    gasPrice: this.gasPrice,
                    value: (this.eth * 0.99).toString()
                }).then((tx) => {
                    console.log(tx);
                    this.aSuccess({
                        show: true,
                        tip: this.$t('m.component.alert_shot.prompt1[3]'),
                    });
                    // 销毁1%
                    transferETSC({
                        privateKey: pKey,
                        to: '0x0000000000000000000000000000000000000000',
                        gasPrice: this.gasPrice,
                        value: (this.eth * 0.01).toString()
                    });
                    setTimeout(() => {
                        this.changeRoute("/wallet/transaction/etsc/list");
                    }, 500);
                }).catch((e) => {
                    console.log(e);
                    myAlert({
                        msg: this.$t('m.component.alert_shot.prompt1[11]'),
                        button: this.$t('m.wallet.transaction.transfer.prompt[14]')
                    });
                });

            }
        },


    }
</script>
<style scoped>
    @import "../../../../assets/css/transfer.css";
    @import "../../../../assets/css/transferHint.css";
    @import "../../../../assets/css/transferPassword.css";

    .content-next2 {
        background-color: #C2C7CB;
        width: 100%;
        height: 1rem;
        text-align: center;
        line-height: 1rem;
        font-size: 0.3rem;
        color: #fff;
        position: absolute;
        bottom: 0;
    }

    .vue-button-active {
        background-color: #5783BA !important;
    }

    .step-two-enter-active, .step-two-leave-active {
        transition: all 0.5s;
    }

    .step-two-enter, .step-two-leave-to {
        transform: translateY(10rem);
    }

    .step-three-enter-active, .step-three-leave-active {
        transition: all 0.5s;
    }

    .step-three-enter, .step-three-leave-to {
        transform: translateY(10rem);
    }

    .content-gray {
        overflow: hidden;
    }
</style>